<template>
  <div class="map-monitor">
    <div class="module-title">
      <div class="title-icon">🗺️</div>
      <div class="title-text">项目地图监控</div>
    </div>
    
    <div class="map-container">
      <div class="map-view" ref="mapContainer">
        <!-- 模拟地图背景 -->
        <div class="map-bg">
          <!-- 桥梁项目点 -->
          <div 
            v-for="(bridge, index) in bridgeProjects" 
            :key="'bridge-' + index"
            class="project-point bridge"
            :style="{ left: bridge.x + '%', top: bridge.y + '%' }"
            @click="showProjectInfo(bridge)"
          >
            <div class="point-marker">🌉</div>
            <div class="point-label">{{ bridge.name }}</div>
          </div>
          
          <!-- 隧道项目点 -->
          <div 
            v-for="(tunnel, index) in tunnelProjects" 
            :key="'tunnel-' + index"
            class="project-point tunnel"
            :style="{ left: tunnel.x + '%', top: tunnel.y + '%' }"
            @click="showProjectInfo(tunnel)"
          >
            <div class="point-marker">🚇</div>
            <div class="point-label">{{ tunnel.name }}</div>
          </div>
          
          <!-- 风险区域 -->
          <div 
            v-for="(risk, index) in riskAreas" 
            :key="'risk-' + index"
            class="risk-area"
            :class="risk.level"
            :style="{ left: risk.x + '%', top: risk.y + '%' }"
          >
            <div class="risk-marker">⚠️</div>
          </div>
        </div>
        
        <!-- 图例 -->
        <div class="map-legend">
          <div class="legend-item">
            <span class="legend-icon bridge">🌉</span>
            <span class="legend-text">桥梁工程</span>
          </div>
          <div class="legend-item">
            <span class="legend-icon tunnel">🚇</span>
            <span class="legend-text">隧道工程</span>
          </div>
          <div class="legend-item">
            <span class="legend-icon risk">⚠️</span>
            <span class="legend-text">风险区域</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 项目信息弹窗 -->
    <div v-if="selectedProject" class="project-info-popup" :style="popupStyle">
      <div class="popup-header">
        <h4>{{ selectedProject.name }}</h4>
        <button class="close-btn" @click="closePopup">×</button>
      </div>
      <div class="popup-content">
        <div class="info-row">
          <span class="label">类型:</span>
          <span class="value">{{ selectedProject.type }}</span>
        </div>
        <div class="info-row">
          <span class="label">进度:</span>
          <span class="value">{{ selectedProject.progress }}%</span>
        </div>
        <div class="info-row">
          <span class="label">人员:</span>
          <span class="value">{{ selectedProject.personnel }}人</span>
        </div>
        <div class="info-row">
          <span class="label">状态:</span>
          <span class="value" :class="selectedProject.status">{{ selectedProject.statusText }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapMonitor',
  data() {
    return {
      bridgeProjects: [
        { 
          name: '长江大桥', 
          type: '桥梁工程', 
          x: 25, 
          y: 30, 
          progress: 78, 
          personnel: 45, 
          status: 'normal', 
          statusText: '正常施工' 
        },
        { 
          name: '黄河大桥', 
          type: '桥梁工程', 
          x: 60, 
          y: 45, 
          progress: 92, 
          personnel: 32, 
          status: 'normal', 
          statusText: '正常施工' 
        },
        { 
          name: '珠江大桥', 
          type: '桥梁工程', 
          x: 75, 
          y: 70, 
          progress: 65, 
          personnel: 38, 
          status: 'warning', 
          statusText: '需要关注' 
        }
      ],
      tunnelProjects: [
        { 
          name: '山区隧道1号', 
          type: '隧道工程', 
          x: 40, 
          y: 25, 
          progress: 83, 
          personnel: 28, 
          status: 'normal', 
          statusText: '正常施工' 
        },
        { 
          name: '城市地铁隧道', 
          type: '隧道工程', 
          x: 55, 
          y: 60, 
          progress: 45, 
          personnel: 42, 
          status: 'normal', 
          statusText: '正常施工' 
        },
        { 
          name: '海底隧道', 
          type: '隧道工程', 
          x: 80, 
          y: 35, 
          progress: 56, 
          personnel: 35, 
          status: 'risk', 
          statusText: '高风险' 
        }
      ],
      riskAreas: [
        { x: 30, y: 50, level: 'high' },
        { x: 65, y: 25, level: 'medium' },
        { x: 85, y: 65, level: 'low' }
      ],
      selectedProject: null,
      popupStyle: {}
    }
  },
  mounted() {
    this.startAnimation()
  },
  methods: {
    showProjectInfo(project) {
      this.selectedProject = project
      // 简单的弹窗定位
      this.popupStyle = {
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)'
      }
    },
    
    closePopup() {
      this.selectedProject = null
    },
    
    startAnimation() {
      // 添加一些动画效果
      setInterval(() => {
        // 随机更新风险区域状态
        this.riskAreas.forEach(area => {
          if (Math.random() < 0.1) {
            const levels = ['low', 'medium', 'high']
            area.level = levels[Math.floor(Math.random() * levels.length)]
          }
        })
      }, 5000)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-monitor {
  height: 100%;
  padding: 20px;
  color: #fff;
  position: relative;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .title-icon {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .title-text {
      font-size: 16px;
      font-weight: bold;
      color: #4fc3f7;
    }
  }
  
  .map-container {
    flex: 1;
    height: calc(100% - 60px);
    position: relative;
    
    .map-view {
      width: 100%;
      height: 100%;
      position: relative;
      border: 1px solid #333;
      border-radius: 4px;
      overflow: hidden;
      
      .map-bg {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        position: relative;
        
        .project-point {
          position: absolute;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            transform: scale(1.2);
          }
          
          .point-marker {
            font-size: 20px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            animation: pulse 2s infinite;
          }
          
          .point-label {
            position: absolute;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            background: rgba(0, 0, 0, 0.7);
            padding: 2px 6px;
            border-radius: 3px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s ease;
          }
          
          &:hover .point-label {
            opacity: 1;
          }
          
          &.bridge .point-marker {
            color: #00d4aa;
          }
          
          &.tunnel .point-marker {
            color: #ffa726;
          }
        }
        
        .risk-area {
          position: absolute;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: ripple 3s infinite;
          
          .risk-marker {
            font-size: 16px;
          }
          
          &.high {
            background: rgba(255, 107, 107, 0.3);
            border: 2px solid #ff6b6b;
          }
          
          &.medium {
            background: rgba(255, 167, 38, 0.3);
            border: 2px solid #ffa726;
          }
          
          &.low {
            background: rgba(79, 195, 247, 0.3);
            border: 2px solid #4fc3f7;
          }
        }
      }
      
      .map-legend {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.8);
        padding: 10px;
        border-radius: 4px;
        
        .legend-item {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          font-size: 11px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .legend-icon {
            margin-right: 6px;
            font-size: 14px;
            
            &.bridge {
              color: #00d4aa;
            }
            
            &.tunnel {
              color: #ffa726;
            }
            
            &.risk {
              color: #ff6b6b;
            }
          }
          
          .legend-text {
            color: #ccc;
          }
        }
      }
    }
  }
  
  .project-info-popup {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0;
    z-index: 1000;
    min-width: 200px;
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #333;
      
      h4 {
        margin: 0;
        font-size: 14px;
        color: #00d4aa;
      }
      
      .close-btn {
        background: none;
        border: none;
        color: #999;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:hover {
          color: #fff;
        }
      }
    }
    
    .popup-content {
      padding: 10px 15px;
      
      .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          color: #999;
        }
        
        .value {
          color: #fff;
          
          &.normal {
            color: #00d4aa;
          }
          
          &.warning {
            color: #ffa726;
          }
          
          &.risk {
            color: #ff6b6b;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
</style>



